import React from 'react';  
import { Select } from 'antd';  
import './cook.css';

const { Option } = Select;  
  
const handleChange = (value, selectName) => {  
  console.log(`selected ${value} in ${selectName}`);  
};  
  
const Cook = () => {  
  // 工艺类型  
  const cookingMethods = [  
    '煮',  
    '蒸',  
    '炒',  
    '榨汁',  
    '凉拌',  
  ];  
  
  // 假设的口味类型  
  const flavors = [  
    '甜',  
    '咸',  
    '酸',  
    '辣',  
    '麻',  
  ];  
  
  // 假设的时间类型  
  const times = [  
    '10分钟',  
    '30分钟',  
    '1小时',  
    '2小时',  
    '半天',  
  ];  
  
  // 假设的难度类型  
  const difficulties = [  
    '简单',  
    '中等',  
    '困难',  
    '专家',  
  ];  
  
  return (  
    <div className='cook_content'>  
      <Select  className='cook_select'
        mode="tags"  
        style={{ width: '100px' ,showSearch:'false'}}  
        placeholder="工艺"  
        onChange={(value) => handleChange(value, '工艺')}  
      >  
        {cookingMethods.map((cookingMethod) => (  
          <Option key={cookingMethod} value={cookingMethod}>  
            {cookingMethod}  
          </Option>  
        ))} 
      </Select>  
  
      <Select className='cook_select' 
        mode="tags"  
        style={{ width: '100px', marginLeft: '10px' }}  
        placeholder="口味"  
        onChange={(value) => handleChange(value, '口味')}  
      >  
        {flavors.map((flavor) => (  
          <Option key={flavor} value={flavor}>  
            {flavor}  
          </Option>  
        ))}  
      </Select>  
  
      <Select  className='cook_select'
        mode="tags"  
        style={{ width: '120px', marginLeft: '10px' }}  
        placeholder="时间"  
        onChange={(value) => handleChange(value, '时间')}  
      >  
        {times.map((time) => (  
          <Option key={time} value={time}>  
            {time}  
          </Option>  
        ))}  
      </Select>  
  
      <Select  className='cook_select'
        mode="tags" 
        style={{ width: '130px', marginLeft: '10px',color:'#f1d311' }}  
        placeholder="难度"  
        onChange={(value) => handleChange(value, '难度')}  
      >  
        {difficulties.map((difficulty) => (  
          <Option key={difficulty} value={difficulty}>  
            {difficulty}  
          </Option>  
        ))}  
      </Select>  
    </div>  
  );  
};  
  
export default Cook;